<template>
    <div class="list">
      <!--{{room}}-->
      <img :src="placeholder" v-if="isShow" @load="imgLoaded" alt="">
      <img v-if="!isShow" :src="room.room_src" alt="">
      <div>
        <p class="rname">
          <span>{{room.room_name}}</span>
          <span>{{room.game_name}}</span>
        </p>
        <p class="uname">
          <span> <i class="fa fa-user"></i> {{room.nickname}} </span>
          <span> <i class="fa fa-user-md"></i> {{room.online | numFix}} </span>
        </p>
      </div>
    </div>
</template>
<script>
//  导入素材
  import placeholder from '../assets/placeholder.gif'
    export default{
        props:['room'],
        data:function(){
            return {
                isShow:true,
                placeholder   // placeholder:placeholder
            }
        },
        methods:{
            imgLoaded:function(){
                this.isShow = false
            }
        }
    }
</script>
<style scoped>
  *{
    box-sizing:border-box;
  }
  .list{
    width:50%; padding:10px 10px 0;
  }
  .list img{
    width:24rem;  height:16rem;
  }
  .list p{
    margin:0; font-size:1.2rem; color:#666; line-height:20px;
  }
  .list p span:last-child{
    float:right; font-size:1rem;
  }
  .list p span:first-child{
    width:65%; display:inline-block;
  }
  .list p span{
    white-space: nowrap; text-overflow: ellipsis; overflow:hidden;
  }

</style>
